﻿@using BrnMall.Web.StoreAdmin.Models
@model BrnMall.Web.StoreAdmin.Models.WidgetConfigListModel

@section header{
    <title>小程序定制</title>
    <link type="text/css" rel="stylesheet" href="/admin_store/css/site.css" />
    <script type="text/javascript" src="/admin_store/scripts/jquery.js"></script>
    <script type="text/javascript" src="/admin_store/scripts/jquery.validate.js"></script>
    <script type="text/javascript" src="/admin_store/scripts/jquery.validate.unobtrusive.js"></script>
    <link type="text/css" rel="stylesheet" href="/components/webuploader/webuploader.css" />
    <script type="text/javascript" src="/components/webuploader/webuploader.js"></script>
    <link href="/components/jbox/Skins/Default/jbox.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/components/jbox/jquery.jBox-2.3.min.js"></script>
    <script type="text/javascript" src="/admin_store/scripts/showlist.js"></script>
    <script type="text/javascript" src="/components/my97datepicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/admin_store/scripts/selectlist.js"></script>
    <script type="text/javascript">
        $(function () {
            var uploader = WebUploader.create({
                pick: '.uploadBut',
                auto: true,
                swf: '/components/webuploader/Uploader.swf',
                server: '/storeadmin/tool/upload?operation=uploadwidgetimage',
                fileVal: 'upload',
                accept: {
                    title: 'Images',
                    extensions: '@ViewData["allowImgType"]',
                    mimeTypes: '*'
                },
                fileSingleSizeLimit: @ViewData["maxImgSize"]
                });

            uploader.on('uploadProgress', function(file, percentage) {
                $(".uploadPreview").html("上传中...");
            });

            uploader.on('uploadSuccess', function(file, response) {
                var data = response._raw;
                if (data == "-1")
                    $(".uploadPreview").html('图片不能为空');
                else if (data == "-2")
                    $(".uploadPreview").html('图片类型不允许');
                else if (data == "-3")
                    $(".uploadPreview").html('图片太大');
                else {
                    $(".uploadPreview").html("<img src=\"@WorkContext.ImageCDN/upload/store/@WorkContext.StoreId/widget/" + data + "\"  />");
                    $("#ShowImg").val(data);
                }
            });

            uploader.on('uploadError', function(file) {
                $(".uploadPreview").html("上传失败");
            });
        });

    </script>

}

@section body{
    <h1 class="rightH1">
       微信小程序 > 首页定制 >
		@if (Model.Code == "index_banner")
		{
			<span class="rightH1-cur">顶部轮播</span>
		}
		else if (Model.Code == "index_nav_icon")
		{
			<span class="rightH1-cur">分类导航</span>
		}
		else if (Model.Code == "index_product")
		{
			<span class="rightH1-cur">商品列表</span>
		}
        <div class="right">

            <div class="clear">
            </div>
        </div>
        <div class="clear">
        </div>
    </h1>
    <div class="table_top">
    </div>
    <div class="dataList">
        <table width="100%">
            <thead>
                <tr>
                    <th width="80" align="left">
                        编号
                    </th>
                    <th width="160" align="left">
                        标题
                    </th>
                    <th width="80" align="left">
                        展示图片
                    </th>
                    <th width="120" align="center">
                        链接类型
                    </th>
                    <th align="center">
                        链接对象
                    </th>
                    <th width="140" align="center">
                        排序
                    </th>
                    <th width="140" align="left">
                        管理操作
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (WidgetConfigModel info in Model.Config)
                {
                    <tr>

                        <td>
                            @info.CId
                    </td>
                    <td>
                        @info.ShowName
                </td>
                <td>
                    <img height="40" width="40" src="@WorkContext.ImageCDN/upload/store/@WorkContext.StoreId/widget/@info.ShowImg" />
                </td>
                <td align="center">
                    @if (info.LinkType == "product")
                    {
                        <span class="mainimgspan">商品</span>
                    }
                    else if (info.LinkType == "store_class")
                    {
                        <span class="mainimgspan">店铺商品分类</span>
                    }
                    else if (info.LinkType == "news")
                    {
                        <span class="mainimgspan">内容</span>
                    }
                    else if (info.LinkType == "news_type")
                    {
                        <span class="mainimgspan">内容分类</span>
                    }
                    else if (info.LinkType == "page")
                    {
                        <span class="mainimgspan">页面</span>
                    }
                    else if (info.LinkType == "h5page")
                    {
                        <span class="mainimgspan">H5网页</span>
                    }
                    else if (info.LinkType == "phonecall")
                    {
                        <span class="mainimgspan">一键拨号</span>
                    }
                    else if (info.LinkType == "weappfunc")
                    {
                        <span class="mainimgspan">小程序功能</span>
                    }
                </td>
                <td align="center">
                    @if (info.LinkValue.Name == "scancode")
                    {<span class="mainimgspan">扫一扫</span> }
                    else if (info.LinkValue.Name == "contact")
                    {<span class="mainimgspan">客服</span> }
                    else{<span class="mainimgspan">@info.LinkValue.Name</span> }
                </td>
                <td align="center">
                    <input type="text" url="@Url.Action("ChangeWidgetConfigSort", new {cid = info.CId})" value="@info.DisplayOrder" class="sortinput unselectedsortinput" />
                </td>
                <td>
                    <a href="@Url.Action("WidgetConfigList", new {cid = info.CId,code= Model.Widget.Code })" url="@Url.Action("WidgetConfigList", new {cid = info.CId,code= Model.Widget.Code })" }>修改</a>
                    <span class="btn-line">|</span>
                    <a href="#" url="@Url.Action("DeleteWidgetConfig", new {cid = info.CId})" class="ajaxdeleteOperate" }>删除</a>
                </td>
            </tr>
                }
            </tbody>
        </table>
    </div>
    <div class="table_bottom bg">
    </div>
    @using (Html.BeginForm("AddWidgetConfig", "Store"))
    {
        @Html.HiddenFor(x => x.Code)

        <div class="addTable">
        @if (Model.Code != "index_banner")
        {
            <table width="100%">
                <tbody>
                    <tr>
                        <td width="66px" align="right">支持横滑：</td>
                        <td style="padding-left: 10px;">

                            @Html.CheckBox("WidgetDisplayType", Model.Widget.DisplayType == 1)

                            <span style="color: gray">设置整个区域的图片由原来的列表展示，改为横向滑动展示</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        }
        
        <table width="100%">
        <tbody>

        <tr>
            <td width="66px" align="right">标题：</td>
            <td style="padding-left: 10px;"><input type="text" size="50" id="ShowName" name="ShowName" value="@Model.configModel.ShowName"/></td>
        </tr>
        <tr>
            <td width="66px" align="right">展示图片：</td>
            <td style="padding-left: 10px;">
                <input type="hidden" name="WId" id="WId" value="@Model.Widget.WId"/>
                <div class="upload">
                    <div class="uploadPreview">
                        @if (Model.configModel.ShowImg != "")
                        {
                            <img src="@WorkContext.ImageCDN/upload/store/@WorkContext.StoreId/widget/@Model.configModel.ShowImg">
                        }
                        else
                        {
                            <span>暂无图片</span>
                        }

                    </div>
                    <div class="left">
                        <div class="uploadProgressBar"></div>
                        <div class="uploadBut">选择图片</div>
                    </div>

                    <div class="clear"></div>
                    <div class="left">@Model.UploadImageTips</div>
                </div>
                <input type="hidden" name="ShowImg" id="ShowImg" value="@Model.configModel.ShowImg"/>
            </td>
        </tr>
        <tr>
            <td align="right">链接:</td>
            <td style="height: 65px; padding-left: 10px;">

                <table height="32">
                    <tbody>
                    <tr>
                        <td>
                            <select id="linktype" name="linktype" style="margin-right: 10px;">
                                <option value="">选择分类</option>
                                <option value="product">商品</option>
                                <option value="store_class">店铺商品分类</option>
                                <option value="news">内容</option>
                                <option value="news_type">内容分类</option>
                                <option value="page">页面</option>
                                <option value="h5page">H5网页</option>
                                <option value="phonecall">一键拨号</option>
                                <option value="weappfunc">小程序功能</option>
                            </select>
                        </td>
                        <td>
                            <div class="selectBt selectBox" id="selectProduct" style="display: none">
                                <input type="button" value="选择商品" class="btnProduct" onclick="openProductSelectLayer(this)" style="height: 22px; line-height: 22px; background: url(/admin_store/images/selectbgico.gif) no-repeat 6px center; padding-left: 22px; padding-right: 10px;">
                                <input type="hidden" class="Pid" id="Pid" name="Pid" value=""/>
                                <input type="hidden" class="ProductName" id="ProductName" name="ProductName" value=""/>
                            </div>
                            <div class="selectBt selectBox" id="selectStoreClass" style="display: none">
                                @Html.DropDownList("StoreClassId", Model.StoreClassList.Select(t => new SelectListItem() {Selected = false, Text = t.Name, Value = t.StoreCid.ToString()}), "选择店铺分类")
                            </div>

                            <div class="selectBt selectBox" id="selectNewsType" style="display: none">
                                @Html.DropDownList("NewsTypeId", Model.NewsTypeList.Select(t => new SelectListItem() {Selected = false, Text = t.Name, Value = t.NewsTypeId.ToString()}), "选择内容分类")
                            </div>
                            <div class="selectBt selectBox" id="selectNews" style="display: none">
                                <input type="button" value="选择内容" class="btnNews" onclick="openNewsSelectLayer(this)" style="height: 22px; line-height: 22px; background: url(/admin_store/images/selectbgico.gif) no-repeat 6px center; padding-left: 22px; padding-right: 10px;"/>
                                <input type="hidden" class="NewsId" id="NewsId" name="NewsId" value=""/>
                                <input type="hidden" class="NewsName" id="NewsName" name="NewsName" value=""/>
                            </div>
                            <div class="selectBt selectBox" id="selectPageInfo" style="display: none">
                                @Html.DropDownList("PageInfoId", Model.PageInfos.Select(t => new SelectListItem() {Selected = false, Text = t.Name, Value = t.Id.ToString()}), "选择页面")
                            </div>
                            <div class="selectBox" id="selectH5Page" style="display: none">
                                <input type="text" size="75" id="H5Page" name="H5Page"/><span>必须是https开头的网址</span>
                            </div>
                            <div class="selectBox" id="selectPhoneCall" style="display: none">
                                <input type="text" size="20" id="PhoneNumber" name="PhoneNumber"/>
                            </div>
                            <div class="selectBt selectBox" id="selectFunctionCode" style="display: none">
                                @Html.DropDownList("FunctionCode", Model.FunctionCodes.Select(t => new SelectListItem() {Selected = false, Text = t.Name, Value = t.FunctionCode}), "选择小程序分类")
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </td>
        </tr>
        <tr>
            <td align="right">排序：</td>
            <td style="padding-left: 10px;"><input type="text" name="DisplayOrder" id="DisplayOrder" value="0" class="input" size="10"/></td>
        </tr>
        <tr>
            <td align="right">是否显示:</td>
            <td style="padding-left: 10px;">@Html.CheckBox("IsShow", true)</td>
        </tr>
        <tr>
            <td align="right"></td>
            <td>
                @if (Model.configModel != null && Model.configModel.CId > 0)
                {
                    <input type="hidden" name="CId" value="@Model.configModel.CId"/>
                    <input type="image" id="addImg" style="margin: 0px; padding: 0px;" src="/admin_store/images/b.jpg"/>
                }
                else
                {
                    <input type="hidden" name="CId" value="0"/>
                    <input type="image" id="addImg" style="margin: 0px; padding: 0px;" src="/admin_store/images/a.jpg"/>
                }
                <script type="text/javascript">
                    $(function() {
                        loadLinkType();
                    });
                    $("#addImg")
                        .click(function() {
                            if ($("#ShowName").val() === "") {
                                alert("名称不能为空");
                                return false;
                            }
                            if ($("#linktype").val() === "") {
                                alert("链接不能为空");
                                return false;
                            }
                            if ($("#ShowImg").val() == "") {
                                alert("图片不能为空");
                                return false;
                            } else {
                                $(this).parents("form").submit();
                                return false;
                            }
                        })

                    $("#linktype")
                        .change(function() {
                            var sel = $(this).val();

                            $(".selectBox").css("display", "none");
                            if (sel === "product") {
                                $("#selectProduct").css("display", "block");
                            } else if (sel === "store_class") {
                                $("#selectStoreClass").css("display", "block");
                            } else if (sel === "news") {
                                $("#selectNews").css("display", "block");
                            } else if (sel === "news_type") {
                                $("#selectNewsType").css("display", "block");
                            } else if (sel === "page") {
                                $("#selectPageInfo").css("display", "block");
                            } else if (sel === "h5page") {
                                $("#selectH5Page").css("display", "block");
                            } else if (sel === "phonecall") {
                                $("#selectPhoneCall").css("display", "block");
                            } else if (sel === "weappfunc") {
                                $("#selectFunctionCode").css("display", "block");
                            }
                        });

                    //加载链接类型
                    function loadLinkType() {
                        var linktype = "@Model.configModel.LinkType";
                        var sel = document.getElementById("linktype");
                        for (var i = 0; i < sel.options.length; i++) {
                            if (sel.options[i].value == linktype) {
                                sel.selectedIndex = i;
                                $("#linktype").change();
                                loadLinkValue();
                            }
                        }
                    }

                    function loadLinkValue() {
                        var type = "@Model.configModel.LinkType";
                        var linkValue = '@Model.configModel.LinkValue';
                        if (linkValue == "") return;
                        linkValue = JSON.parse(linkValue);

                        if (type === "product") {
                            $("#Pid").val(linkValue.Id);
                            $("#ProductName").val(linkValue.Name);
                            $(".btnProduct").val(linkValue.Name)
                        } else if (type === "store_class") {
                            var sel = $_2("StoreClassId");
                            for (var i = 0; i < sel.options.length; i++) {
                                if (sel.options[i].value == linkValue.Id)
                                    sel.selectedIndex = i;
                            }
                        } else if (type === "news") {
                            $("#NewsId").val(linkValue.Id);
                            $("#NewsName").val(linkValue.Name);
                            $(".btnNews").val(linkValue.Name)
                        } else if (type === "news_type") {
                            var sel = $_2("NewsTypeId");
                            for (var i = 0; i < sel.options.length; i++) {
                                if (sel.options[i].value == linkValue.Id)
                                    sel.selectedIndex = i;
                            }
                        } else if (type === "page") {
                            var sel = $_2("PageInfoId");
                            for (var i = 0; i < sel.options.length; i++) {
                                if (sel.options[i].value == linkValue.Id)
                                    sel.selectedIndex = i;
                            }
                        } else if (type === "h5page") {
                            $("#H5Page").val(linkValue.Url);
                        } else if (type === "phonecall") {
                            $("#PhoneNumber").val(linkValue.Name);
                        } else if (type === "weappfunc") {
                            $("#weappfunc").val(linkValue.Name);
                        }
                        $("#DisplayOrder").val("@Model.configModel.DisplayOrder");
                        var isShow = "@Model.configModel.IsShow";
                        if (isShow == 'True')
                            $("#IsShow").attr("checked", true);
                        else
                            $("#IsShow").attr("checked", false);
                    }

                    function $_2(id) {
                        return document.getElementById(id);
                    }
                </script>
            </td>
        </tr>
        </tbody>
        </table>
        </div>
    }
}